<template>
    <div>
        <a-modal
            title="车间菌落数"
            :dialog-style="{ top: '40px' }"
            :visible="visible"
            @ok="visible = false"
            @cancel="visible = false"
            class="workshop-diagram-modal"
            :footer="null"
            :width="1000"
        >
        <!-- 按照日期查询车间菌落数 -->
            <!-- <div>
                <span>日期：</span>
                <a-date-picker v-model:value="dayDate" />
            </div> -->
            <div style="height: calc(100vh - 180px);width: 100%;" :key="containerKey">
                <div class="ringDiagram-comp" :id="containerId"></div>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {
    spcyQyInfoqueryCjYjxx,
} from './service/index'
import moment from 'moment'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            visible:false,
            containerId:'c'+ new Date().getTime(),
            XList:[],
            YList:[],
            averageList:[],
            containerKey:null,
            actionValue:0,
            warningValue:0,
            averageValue:0,
            formState:{},
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            this.formState = val
            let data = []
            this.XList = []
            this.YList = []
            this.averageList = []
            this.containerId = 'c'+ new Date().getTime()
            this.containerKey = Date.now()
            spcyQyInfoqueryCjYjxx({id:val.id}).then(res=>{
                if(res.code == 200){
                    //console.log('查询车间菌落数接口的数据',res.result)
                    if(res.result.length){
                        this.actionValue = res.result[0].fcbz
                        this.warningValue = res.result[0].fyjz
                        this.averageValue = res.result[0].pjz
                    }
                    res.result.forEach((item,index) => {
                        let arr = data.filter(i=>{i == item.fdjsj})
                        if(!arr.length){
                            data.push(item.fdjsj)
                            this.XList.push(moment(item.fdjsj).format('HH:mm:ss'))
                            this.YList.push(item.fwswnd)
                            this.averageList.push(item.pjz)
                        }
                    });
                    this.getPieChart(this.XList,this.YList,this.averageList)
                }else{
                    this.getPieChart([],[])
                }
            })
        },
        getPieChart(x,y,ay){
            var chartDom = document.getElementById(this.containerId);
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                color:['#5470c6','#ee6666','#91cc75','#fac858'],
                title: {
                    left: 'center',
                    text: this.formState.fcjmc+this.formState.fqyfl+'浮游菌趋势图'
                },
                legend: {
                    data:['菌落数','行动值','平均值','预警值'],
                    // data:['菌落数'],
                    show: true,
                    orient: "vertical",
                    align: "left",
                    right:0,
                    textStyle: {
                        fontWeight: "bolder",
                        fontSize: 14
                    },
                    borderColor: "#000",
                    borderWidth: 1
                },
                xAxis: {
                    type: 'category',
                    data: x,
                    name: "时间",
                    nameLocation: "start",
                    nameTextStyle:{
                        verticalAlign: "top",
                        height: 30,
                        lineHeight: 30,
                        fontSize: 20,
                        fontWeight: "bold",
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    name: "菌\n落\n数",
                    nameRotate: 1,
                    // nameLocation: "middle",
                    nameLocation: "middle",
                    nameGap: 40,
                    nameTextStyle:{
                        fontSize: 20,
                        fontWeight: "bold",
                    }
                },
                series: [{
                    name: '菌落数',
                    type: 'line',
                    // stack: 'Total',
                    smooth: false,
                    data: y,
                    type: 'line',
                    label: {
                        show: true,
                        fontWeight: "bold",
                        fontSize: 14,

                        // color:'#fff',
                        // backgroundColor: '#5ca3e5',
                    },
                    markLine: {
                        data: [{
                            yAxis:this.actionValue,
                            label:{
                                padding: [0, 0, 0, 0],
                                position: "end",
                                formatter:'行动值： {per|{c}}  ',
                                // formatter:(e)=>{
                                //     return "行动值："+e.value
                                // },
                                fontWeight:600,
                                fontSize: 14,
                                rich: {
                                    per: {
                                        color: 'red',
                                        fontSize: 16 ,
                                    }
                                }
                                
                            },
                            lineStyle: {//警戒线的样式，颜色，宽度，类型
                                color: 'red',
                                type: 'dashed',//还有实线，
                                width: 1
                            },
                        },{
                            yAxis:this.warningValue,
                            label:{
                                padding: [0, 0, 0, 0],
                                position: "end",
                                formatter:'预警值： {per|{c}}  ',
                                fontWeight:600,
                                fontSize: 14 ,
                                rich: {
                                    per: {
                                        color: '#fac858',
                                        fontSize: 16 ,
                                    }
                                }
                            },
                            lineStyle: {//警戒线的样式，颜色，宽度，类型
                                color: '#fac858',
                                type: 'dashed',//还有实线，
                                width: 1
                            },
                        },{
                            yAxis:this.averageValue,
                            label:{
                                padding: [0, 0, 0, 0],
                                position: "end",
                                formatter:'平均值： {per|{c}}  ',
                                fontWeight:600,
                                fontSize: 14 ,
                                rich: {
                                    per: {
                                        color: '#91cc75',
                                        fontSize: 16 ,
                                    }
                                }
                            },
                            lineStyle: {//警戒线的样式，颜色，宽度，类型
                                color: '#91cc75',
                                type: 'dashed',//还有实线，
                                width: 1
                            },
                        }],
                        
                        silent: true
                    }
                    
                }
                ,{
                    name: '行动值',
                    type: 'line',
                    // stack: 'Total',
                    data: [],
                    type: 'line',
                    label: {
                        show: true,
                        fontWeight: "bold",
                        fontSize: 14,
                        // color:'#fff',
                        // backgroundColor: '#5ca3e5',
                    },
                },{
                    name: '平均值',
                    type: 'line',
                    // stack: 'Total',
                    data: [],
                    type: 'line',
                    label: {
                        show: true,
                        fontWeight: "bold",
                        fontSize: 14,
                        // color:'#fff',
                        // backgroundColor: '#5ca3e5',
                    },
                },{
                    name: '预警值',
                    type: 'line',
                    // stack: 'Total',
                    data: [],
                    type: 'line',
                    label: {
                        show: true,
                        fontWeight: "bold",
                        fontSize: 14,
                        // color:'#fff',
                        // backgroundColor: '#5ca3e5',
                    },
                }
                ]
            };

            option && myChart.setOption(option);
        }
    }
}
</script>
<style lang="less">
.workshop-diagram-modal{
    .ringDiagram-comp{
        width: 100%;
        height: calc(100vh - 180px);
    }
}

</style>